<template>
<div class="loading">
    <view v-for="index in total" :key="index" :class="{ startRun: start[0] === index }"></view>
</div>
</template>

<script setup lang="ts">
    import { ref, type Ref, onMounted } from 'vue'
    const start: Ref<number[]> = ref([])
    const total = ref(3)

    onMounted(() => {
        let i = 0
        setInterval(() => {
            i += 1;
            start.value[0] = i
            if (i > total.value) i = 0
        }, 800)
    })
</script>

<style lang="less" scoped>
    .loading {
        > view {
            width: 16rpx;
            height: 16rpx;
            display: inline-block;
            border-radius: 50%;
            background: #A4B2CE;
            &.startRun {
                animation: run 800ms infinite ease-in;
            }
            &:not(:last-child) {
                margin-right: 8rpx;
            }
        }
    }

    @keyframes run {
        0% {
            transform: translateY(0)
        }
        50% {
            transform: translateY(-10rpx)
        }
        100% {
            transform: translateY(0)
        }
    }
</style>
  